<template>
  <div class="register_container">
    <div class="register_box">
      <!--登录表单-->
      <div class="header">注册</div>
      <el-form ref="registerFormRef" :model="registerForm" :rules="registerFormRules" class="register_form">
        <el-form-item prop="username" :error="errorMsgUserName">
          <el-input v-model="registerForm.username" prefix-icon="el-icon-user-solid" placeholder="账号" @blur="checkRepeatUserName($event,1)"></el-input>
        </el-form-item>
        <el-form-item prop="password">
          <el-input v-model="registerForm.password" prefix-icon="el-icon-lock" show-password placeholder="密码"></el-input>
        </el-form-item>
        <el-form-item prop="nickname" :error="errorMsgNickName">
          <el-input v-model="registerForm.nickname" prefix-icon="el-icon-chat-round" placeholder="昵称" @blur="checkRepeatNickName($event,1)"></el-input>
        </el-form-item>
        <el-form-item prop="email" :error="errorMsgEmail">
          <el-input v-model="registerForm.email" prefix-icon="el-icon-chat-line-round" placeholder="邮箱"></el-input>
        </el-form-item>
        <el-form-item prop="code">
          <el-input v-model="registerForm.code" prefix-icon="el-icon-paperclip" placeholder="验证码" style="width: 270px;"></el-input>
          <el-button type="primary" @click="send" ref="send" :disabled="bool">立即发送<span class="send" ref="time">({{time}}s)</span></el-button>
        </el-form-item>
        <el-form-item class="avatar" prop="avatar">
          <input type="file" id="headPortraitUpload" style="display: block;" class="input">
          <div class="upload">
            <svg t="1645513661210" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7562" width="50" height="50">
              <path d="M671.748071 482.618628c-17.701843 0-32.114094-14.397499-32.114094-32.084591 0-17.67234 14.404875-32.047712 32.114094-32.047712s32.106718 14.375372 32.106718 32.047712C703.847414 468.213753 689.449915 482.618628 671.748071 482.618628zM671.748071 440.392356c-5.627711 0-10.208063 4.550849-10.208063 10.141681 0 5.612959 4.580352 10.17856 10.208063 10.17856s10.200687-4.5656 10.200687-10.17856C681.948759 444.943205 677.375782 440.392356 671.748071 440.392356z" p-id="7563"></path>
              <path d="M474.984708 643.698026c-58.836501 0-106.705236-47.780225-106.705236-106.491339 0-58.703738 47.868734-106.469211 106.705236-106.469211 58.814374 0 106.668357 47.765474 106.668357 106.469211C581.653065 595.925176 533.806458 643.698026 474.984708 643.698026zM474.984708 452.643507c-46.762369 0-84.806581 37.933575-84.806581 84.56318 0 46.644357 38.044211 84.592683 84.806581 84.592683 46.740242 0 84.762326-37.948326 84.762326-84.592683C559.75441 490.577082 521.72495 452.643507 474.984708 452.643507z" p-id="7564"></path>
              <path d="M687.082293 718.503065 336.925083 718.503065c-42.21152 0-76.553096-34.275194-76.553096-76.405581L260.371986 428.878782c0-36.576434 26.685529-68.129969 62.030209-75.011561 9.507365-28.440961 36.63544-48.385038 67.230125-48.385038l103.946699 0c29.997248 0 56.793414 19.287633 66.787579 46.954139l126.708319 0c42.218896 0 76.553096 34.289945 76.553096 76.435084l0 213.211326C763.635389 684.227871 729.293813 718.503065 687.082293 718.503065zM389.632321 327.39559c-22.968142 0-43.096612 16.22669-47.868734 38.575267l-1.689051 7.899448-8.039587 0.730201c-27.90253 2.49301-49.756931 26.338868-49.756931 54.278277l0 213.211326c0 30.048879 24.517053 54.506926 54.654441 54.506926l350.15721 0c30.130012 0 54.654441-24.450671 54.654441-54.506926L741.74411 428.878782c0-30.071006-24.517053-54.536429-54.654441-54.536429L543.380205 374.342354l-1.902948-8.578018c-4.927013-22.237941-25.070235-38.376121-47.898237-38.376121L389.632321 327.388215z" p-id="7565"></path>
              <path d="M725.185511 643.823414" p-id="7566"></path>
              <path d="M512.011064 0C229.231494 0 0 229.231494 0 512.011064c0 282.764818 229.231494 511.988936 512.011064 511.988936 282.772194 0 512.003688-229.224118 512.003688-511.988936C1024.007376 229.231494 794.783258 0 512.011064 0zM512.011064 999.033025c-268.979508 0-487.029337-218.04983-487.029337-487.021962S243.031556 24.981726 512.011064 24.981726c268.986884 0 487.036713 218.04983 487.036713 487.029337S780.997947 999.033025 512.011064 999.033025z" p-id="7567"></path>
            </svg>
            <span class="shangchuantouxiang">上传头像</span>
          </div>
          <img id="headPortraitImgShow" src="" width="100px" height="100px" class="img" />
          <div class="btns">
            <el-button type="primary" @click="register">注册</el-button>
            <el-button type="info" @click="resetregisterForm">重置</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { sendCaptcha, register, registerExistUsername, registerExistNickname } from '@/api/register'
export default {
  name: 'Register',
  data() {
    var checkEmail = (rule, value, callback) => {
      const regEmail =
        /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (regEmail.test(value)) {
        return callback()
      }
      callback(new Error('请输入合法的邮箱'))
    }
    var checkUsername = (rule, value, callback) => {
      const regUsername = /^[0-9a-zA-Z]+$/
      if (regUsername.test(value)) {
        return callback()
      }
      callback(new Error('用户名只能是字母和数字的组合'))
    }
    return {
      registerForm: {
        username: '',
        password: '',
        avatar: '',
        imageUrlUpload: '',
        email: '',
        code: '',
        nickname: '',
        code: '',
      },
      bool: false,
      time: 60,
      errorMsgNickName: '',
      errorMsgUserName: '',
      errorMsgEmail: '',
      form: {
        userName: null,
        password: null,
        nickName: null,
        email: null,
        fileType: null,
        code: null,
        avatar: '',
      },
      registerFormRules: {
        username: [
          { required: true, message: '请输入用户名', trigger: 'blur' },
          { validator: checkUsername, trigger: 'blur' },
        ],
        password: [
          { required: true, message: '请输入密码', trigger: 'change' },
          { min: 6, max: 16, message: '长度在 6 到 16 个字符', trigger: 'change' },
        ],
        avatar: [{ required: true, message: '请选择头像', trigger: 'change' }],
        email: [
          { required: true, message: '请输入邮箱', trigger: 'blur' },
          { validator: checkEmail, trigger: 'blur' },
        ],
        code: [{ required: true, message: '请输入验证码', trigger: 'change' }],
        nickname: [{ required: true, message: '请输入昵称', trigger: 'change' }],
      },
    }
  },
  mounted() {
    document.getElementById('headPortraitUpload').addEventListener('change', (e) => {
      this.headPortraitListener(e)
    })
  },
  methods: {
    resetregisterForm() {
      this.$refs.registerFormRef.resetFields()
    },
    register() {
      this.$refs.registerFormRef.validate((valid) => {
        if (valid) {
          this.form.userName = this.registerForm.username
          this.form.password = this.registerForm.password
          this.form.email = this.registerForm.email
          this.form.nickName = this.registerForm.nickname
          this.form.code = this.registerForm.code
          register(this.form).then((res) => {
            this.$router.push('/login')
          })
        }
      })
    },
    send() {
      if (this.registerForm.email == '') {
        this.errorMsgEmail = '请先填写邮箱'
        return
      }
      sendCaptcha(this.registerForm.email).then((res) => {})
      this.$refs.time.style.display = 'inline'
      this.bool = true
      let timer = setInterval(() => {
        if (this.time == 0) {
          this.time = 4
          clearInterval(timer)
          this.$refs.time.style.display = 'none'
          this.bool = false
        }
        this.time--
      }, 1000)
    },
    headPortraitListener(e) {
      var img = document.getElementById('headPortraitImgShow')
      if (window.FileReader) {
        var file = e.target.files[0]
        var reader = new FileReader()
        if (file && file.type.match('image.*')) {
          reader.readAsDataURL(file)
        } else {
          img.css('display', 'none')
          img.attr('src', '')
        }
        let that = this
        reader.onloadend = function (e) {
          img.setAttribute('src', reader.result)

          that.form.fileType = reader.result.substring(
            reader.result.indexOf('/') + 1,
            reader.result.indexOf(';')
          )
          document.getElementById('headPortraitImgShow').style.display = 'block'
          that.form.avatar = reader.result.substr(reader.result.indexOf(',') + 1)
          that.registerForm.avatar = reader.result.substr(reader.result.indexOf(',') + 1)
          // console.log(that.form.avatar)
        }
      }
    },
    checkRepeatUserName(event, e) {
      registerExistUsername(event.target.value).then((res) => {
        // console.log(res)
        if (res.data == true) {
          this.errorMsgUserName = '该用户名已存在'
        }
      })
    },
    checkRepeatNickName(event, e) {
      registerExistNickname(event.target.value).then((res) => {
        // console.log(res)
        if (res.data == true) {
          this.errorMsgNickName = '该昵称已存在'
        }
      })
    },
  },
}
</script>

<style scoped>
.register_container {
  /* box-sizing: unset !important; */
  height: 100vh;
  width: 100%;
  background: url('../assets/bg.jpg') no-repeat;
}

.register_box {
  width: 450px;
  height: 450px;
  /* max-height: 600px; */
  background-color: #fff;
  /* overflow: scroll; */
  border-radius: 3px;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.register_form {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 0 20px;
  box-sizing: border-box;
}
.header {
  width: 100%;
  /* background: red; */
  height: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 20px;
}
.btns {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
.send {
  display: none;
}
.avatar {
  height: 80px;
  /* background: blue; */
  position: relative;
}
.shangchuantouxiang {
  font-size: 10px;
  position: absolute;
  bottom: -5px;
}
.input {
  /* background: red; */
  width: 60px;
  height: 60px;
  left: 0px;
  opacity: 0;
  z-index: 999;
  /* cursor: pointer; */
  position: absolute;
  top: 30px;
  transform: translateY(-50%);
}
.upload {
  position: absolute;
  top: 0px;
  left: 0px;
  width: 60px;
  height: 100px;
  /* cursor: pointer; */
  /* background: darkcyan; */
  /* border: 1px solid rgb(121, 117, 117); */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: translateY(-20px);
}
.img {
  width: 80px;
  height: 80px;
  display: none;
  position: absolute;
  left: 80px;
  top: 0px;
}
</style>